<template>
    <div>
        <!-- <el-tabs @tab-click="handleClick" style="height: 200px">
                <el-tab-pane v-for="item in tableData.col" :label="item.cname" :name="item.ename">
                    <span>{{item.cname}}</span>
                    <el-popover
                        :ref="item.ename"
                        placement="bottom"
                        title="标题"
                        width="200"
                        trigger="click"
                        content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
                        v-model="visible">
                        <el-button slot="reference" @click="visibleFn(item.ename)">手动激活</el-button>
                    </el-popover>
                    
                </el-tab-pane>
        </el-tabs> -->
        <!-- :render-header="renderHeaderMethods" -->
        <!-- <el-table :data="tableData.data" style="font-size: 16px; width: 100%">
            <el-table-column type="selection" width="80" align="center"> </el-table-column>
            <el-table-column
                v-for="item in tableData.col"
                :key="item.ename"
                :prop="item.ename"
                :label="item.cname"
                show-overflow-tooltip
                :render-header="renderHeaderMethods"
            >
            </el-table-column>
            <el-table-column label="操作" width="180" align="center">
                <el-button type="text">查 看</el-button>
                <el-button type="text">编 辑</el-button>
                <el-button type="text">提 交</el-button>
            </el-table-column>
        </el-table> -->

        
        <div style="display: flex">
        <!-- ========================echarts=============================== -->
        <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
        <div id="main" style="width: 600px;height:300px;"></div>
        </div>
        <!-- jsmind -->
        <!-- <div id="jsmind_container" style="width: 100%; height: 500px"></div> -->

    </div>
</template>

<script>
// import "jsmind/style/jsmind.css";
export default {
    data() {
        return {
            visible: false,
            open: false,
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                resource: '',
                desc: ''
            },
            tableData: {
                col: [
                    { cname: '序号', ename: 'xh' },
                    { cname: '部队名称', ename: 'bdmc' },
                    { cname: '部队内码', ename: 'bdnm' },
                    { cname: '部队字典查询项', ename: 'bdzdcxx' },
                    { cname: '表单', ename: 'bd' },
                    { cname: '部队部署名称', ename: 'bdbsmc' },
                    { cname: '装备', ename: 'zb' },
                    { cname: '部队物质实力', ename: 'bdwzsl' },
                    { cname: '部队天文作战时间(yy-mm-dd)', ename: 'bdtwzzsj' },
                    { cname: '军委基地部队天文作战时间(年/月/日;时/分/秒)', ename: 'jwjdbdtwzzsj' },
                    { cname: '状态', ename: 'zt' },
                    { cname: '我不是刘德华', ename: 'wbsldh' },
                    { cname: '再见只是陌生人', ename: 'zjzsmsr' },
                    { cname: '默说', ename: 'm' },
                    { cname: '小小的太阳', ename: 'xxdty' },
                    { cname: '阴天', ename: 'yt' },
                    { cname: '郭源潮 (宋冬野) ', ename: 'gycsdy' },
                    { cname: '美人鱼', ename: 'mry' }
                ],
                data: [
                    {
                        xh: '1案发生对方水电费都',
                        bdmc: '部队名称',
                        bdnm: '2323411',
                        bdzdcxx: '部队字典查询项部队字典查询项部队字典查询项',
                        bd: 'dkmgksgs的父母地方',
                        bdbsmc: '十大港口给但是v的实力,1vs1',
                        zb: '人装物弹',
                        bdwzsl: '123',
                        bdtwzzsj: '2021-10-10 20:12:12',
                        jwjdbdtwzzsj: '2021-10-10 20:12:12',
                        zt: '可根据的客观角度看的感觉',
                        wbsldh: '方面山东建工苏东坡',
                        zjzsmsr: '没感觉电饭锅',
                        m: '年少时候发过虔诚的誓, 是你',
                        xxdty: '面对就要失去的爱情,你像一个小小的太阳',
                        yt: '阴天,在不开灯的房间',
                        gycsdy: '你我都一样 将被遗忘 郭源潮, 你的病也和我一样',
                        mry: '美人鱼的眼泪是透明的'
                    },
                    {
                        xh: '2',
                        bdmc: '部队名称',
                        bdnm: '2323411',
                        bdzdcxx: '部队字典查询项部队字典查询项部队字典查询项',
                        bd: 'dkmgksgs的父母地方',
                        bdbsmc: '十大港口给但是v的实力,1vs1',
                        zb: '人装物弹',
                        bdwzsl: '123',
                        bdtwzzsj: '2021-10-10 20:12:12',
                        jwjdbdtwzzsj: '2021-10-10 20:12:12',
                        zt: '可根据的客观角度看的感觉'
                    },
                    {
                        xh: '3',
                        bdmc: '部队名称',
                        bdnm: '2323411',
                        bdzdcxx: '部队字典查询项部队字典查询项部队字典查询项',
                        bd: 'dkmgksgs的父母地方',
                        bdbsmc: '十大港口给但是v的实力,1vs1',
                        zb: '人装物弹',
                        bdwzsl: '123',
                        bdtwzzsj: '2021-10-10 20:12:12',
                        jwjdbdtwzzsj: '2021-10-10 20:12:12',
                        zt: '可根据的客观角度看的感觉'
                    }
                ]
            }
        };
    },
    mounted() {
        this.initEcharts();
        this.initJsMind();
    },
    methods: {
        handleClick(label) {},
        visibleFn(ename) {
            // console.log(this.$refs[ename][0]);
            this.visible = !this.visible
            // document.getElementById(this.$refs[ename][0].$refs.popper.id).style.display = 'none'
        },
        renderHeaderMethods(h, { column }) {
            if (column.label.length <= 4) {
                column.realWidth = 140;
                // console.log(column.label);
            } else if (column.label.length <= 8 && column.label.length > 4) {
                column.realWidth = 220;
            } else {
                column.realWidth = 220;
            }
            return h(
                'div',
                {
                    style: 'text-aglin:center;',
                    class: 'overhide'
                },
                [
                    // h('span',{},column.label.length>6? column.label.slice(0,6)+'...' :column.label),
                    h('promptMessages', {
                        // 引用 promptMessages 全局组件
                        props: {
                            // messages 里面配置的信息即为 Tooltip 提示信息
                            messages: [column.label],
                            item: column.label.length > 6 ? column.label.slice(0, 6) + '...' : column.label
                        }
                    })
                ]
            );
        },
        initEcharts() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('main'));
            // 指定图表的配置项和数据
            myChart.setOption({
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                },
                yAxis: {},
                series: [
                    {
                        name: '销量',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20]
                    }
                ]
            });
        },
        initJsMind() {
            // jsMind 数据
            let mind = {
                /* 元数据，定义思维导图的名称、作者、版本等信息 */
                meta: {
                    name: 'example',
                    author: 'hizzgdev@163.com',
                    version: '0.2'
                },
                /* 数据格式声明 */
                format: 'node_array',
                /* 数据内容 */
                data: [
                    { id: 'root', isroot: true, topic: 'jsMind' },
                    { id: 'easy', parentid: 'root', topic: 'Easy', direction: 'left' },
                    { id: 'easy1', parentid: 'easy', topic: 'Easy to show' },
                    { id: 'easy2', parentid: 'easy', topic: 'Easy to edit' },
                    { id: 'easy3', parentid: 'easy', topic: 'Easy to store' },
                    { id: 'easy4', parentid: 'easy', topic: 'Easy to embed' },
                    { id: 'open', parentid: 'root', topic: 'Open Source', expanded: false, direction: 'right' },
                    { id: 'open1', parentid: 'open', topic: 'on GitHub' },
                    { id: 'open2', parentid: 'open', topic: 'BSD License' },
                    { id: 'powerful', parentid: 'root', topic: 'Powerful', direction: 'right' },
                    { id: 'powerful1', parentid: 'powerful', topic: 'Base on Javascript' },
                    { id: 'powerful2', parentid: 'powerful', topic: 'Base on HTML5' },
                    { id: 'powerful3', parentid: 'powerful', topic: 'Depends on you' }
                ]
            };
            let options = {
                container: 'jsmind_container', // [必选] 容器的ID，或者为容器的对象
                editable: false, // [可选] 是否启用编辑
                theme: 'success', // [可选] 主题
                mode: 'full', // 显示模式 'full/两侧; side/右侧'
                support_html: true, // 是否支持节点里的HTML元素
                view: {
                    engine: 'canvas', // 思维导图各节点之间线条的绘制引擎
                    hmargin: 100, // 思维导图距容器外框的最小水平距离
                    vmargin: 50, // 思维导图距容器外框的最小垂直距离
                    line_width: 2, // 思维导图线条的粗细
                    line_color: '#555' // 思维导图线条的颜色
                },
                layout: {
                    hspace: 30, // 节点之间的水平间距
                    vspace: 50, // 节点之间的垂直间距
                    pspace: 13 // 节点与连接线之间的水平间距（用于容纳节点收缩/展开控制器）
                }
            };
            let jm = new this.$jsMind(options);
            // let jm = this.$jsMind.show(options, mind);
            // 让 jm 显示这个 mind 即可
            jm.show(mind);
            jm.set_node_color('root', '#000', '#8df'); // 方法可设置指定节点的背景色与前景色。
            // jm.set_node_font_style(nodeid, size, weight, style); // 方法可设置指定节点的字体。
            // jm.set_node_background_image(nodeid, image, width, height); // 方法可设置指定节点的背景图片。
        }
    }
};
</script>

<style>
.overhide {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.label {
    display: inline-block;
    /* font-size: 15px; */
    width: 100px !important;
    /* height: 32px; */
    white-space: nowrap;
    text-align: right;
    padding-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>